<template>
  <div class="box">
    <el-button type="primary" @click="drawer2 = true">
      <img :src="img" alt="" />
    </el-button>
    <el-drawer v-model="drawer2" :direction="direction" :size="600">
      <template #title>
        <h4>
          {{ name }}
          <p>
            {{ name2 }}
          </p>
        </h4>
      </template>
      <template #default>
        <Die :img="img" />
        <div class="Zh2">
            <Lyric />
          <div>
            <el-button class="biao" @click="left" type=""
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shangyishou"></use></svg
            ></el-button>
            <el-button class="biao" @click="play" type=""
              ><svg class="icon" aria-hidden="true" v-if="isBtnShow">
                <use xlink:href="#icon-bofang1"></use>
              </svg>
              <svg class="icon" aria-hidden="true" v-else>
                <use xlink:href="#icon-zanting"></use></svg
            ></el-button>
            <el-button class="biao" @click="right" type=""
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiayishou"></use></svg
            ></el-button>
          </div>
          <div class="fang">
            <span>{{ time(this.$store.state.musicCurrentTime) }}</span>
            <input
              type="range"
              step="0.05"
              min="0"
              :max="this.$store.state.duration"
              v-model="this.$store.state.musicCurrentTime"
            />
            <span>{{ time(this.$store.state.duration) }}</span>
          </div>
        </div>
        <div class="Zh3">
          <el-scrollbar>
            <el-table
              :data="this.$store.state.playList"
              highlight-current-row
              empty-text="啊哦网络不给力呀"
              stripe
              style="width: 100%"
              @dblclick="li"
            >
              <el-table-column type="index" width="50" />
              <el-table-column prop="name" label="播放列表" width="180" />
              <el-table-column prop="ar[0].name" label="歌手" width="180" />
              <el-table-column prop="dt" label="时长" />
            </el-table>
          </el-scrollbar>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { computed, inject, ref, toRefs } from "vue";
import { ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

import Die from "./Die.vue";
import Lyric from "./Lyric.vue";
import footer from "./footer.vue";

const store = useStore();
const drawer2 = ref(false);
const direction = ref("btt");
const radio1 = ref("Option 1");
const { img, name, name2, id, left, play, right, isBtnShow } = toRefs(props);
const props = defineProps({
  img: String,
  name: String,
  name2: String,
  id: Number,
  left: Function,
  play: Function,
  right: Function,
  isBtnShow: Boolean,
});
const li = (row) => {
  store.commit("upDatePlayListIndex", row.path[2].__vnode.key);
};
const time = (value) => {
  let minute = value / 60;
  let minutes = parseInt(minute);
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  //秒
  let second = value % 60;
  let seconds = Math.round(second);
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  return minutes + ":" + seconds;
};
</script>

<style lang="less" scoped>
.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
h4 {
  margin: 0;
}
.el-button {
  border-radius: 10px;
  height: 55px;
  width: 55px;
  img {
    border-radius: 10px;
    height: 55px;
    width: 55px;
  }
}
.el-drawer {
  .Zh {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 300px;
    background: url("../../assets/d7e4e3a244701ee85fecb5d4f6b5bd57.png")
      no-repeat;
    background-size: 100%;
    span {
      position: absolute;
      left: 131px;
      bottom: -337px;
      width: 150px;
      height: 245px;
      background: url("../../assets/needle-ab.png");
      background-size: 100%;
      transform-origin: 0 0;
      transform: rotate(-100deg);
    }
    .spanBo {
      transform: rotate(-118deg);
    }
    .zhBo {
      transform: rotate(360deg);
    }
    img {
      height: 200px;
      width: 200px;
      border-radius: 50%;
    }
  }
  .Zh2 {
    float: left;
    height: 401px;
    width: 581px;
    margin-left: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    div {
      &:first-child {
        height: 320px;
        width: 520px;
        margin-bottom: 30px;
      }
    }
    .fang {
      display: flex;
      align-items: center;
    }
  }
  .Zh3 {
    float: left;
    height: 401px;
    width: 500px;
    margin-left: 20px;
  }
  input {
    width: 380px;
    height: 5px;
    margin: 0 10px;
  }
}
.biao {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
}
</style>
